<template>
	<view class="content">
		<view class="userInfoBox">
			<image :src="avatar" class="avatar"></image>
			<template v-if="isLogon==true">
				<text class="name ellipsis" v-if="data.name">{{data.name}}</text>
				<text class="name ellipsis" v-else>暂未设置名称</text>
				<image :src="baseUrl+'img/my/1.png'" class="set" :class="data.role==1?'selleft':''"
					@click="handleClick(() => $navto.navto('/pages/my_setting/my_setting'))"></image>
				<image :src="baseUrl+'img/my/manage.png'" class="manage" v-if="data.role==1" @click="handleClick(() => $navto.navto('/pages/admin/admin',{id:data.majordomo_id}))"></image>
				<view class="authBox" v-if="data.is_owner==0"
					@click="handleClick(() => $navto.navto('/pages/owner_certification/owner_certification'))">
					业主认证 >
				</view>
				<view class="roomNumBox" v-else>
					<block v-if="isEye==true">
						<text class="roomNum">{{data.floor_house_num}}</text>
						<image :src="baseUrl+'img/my/16.png'" class="eye" @click="eye"></image>
					</block>
					<block v-else>
						<text class="roomNum">********</text>
						<image :src="baseUrl+'img/my/17.png'" class="eye" @click="eye"></image>
					</block>
				</view>
			</template>
			<template v-else>
				<view class="notLogon" @click="$navto.navto('/pages/login/login')">
					立即登录
				</view>
			</template>
			<view class="memberBox">
				<text class="memberType">会员ID</text>
				<text class="memberNum" v-if="isLogon==true">NO:{{data.sn}}</text>
				<text class="memberNum" v-else>--</text>
			</view>
		</view>
		<view class="myOrderBox">
			<view class="orderTopBox"
				@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 0, type: 1 }))">
				<view class="orderTypeBox">
					我的订单
				</view>
				<text class="orderArrow">></text>
			</view>
			<view class="line"></view>
			<view class="myOrderItemBox">
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 1, type: 2 }))">
					<image :src="baseUrl+'img/my/4.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">待付款</text>
					<view class="orderNum" v-if="data.due_num>0">{{data.due_num}}</view>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 2, type: 3 }))">
					<image :src="baseUrl+'img/my/5.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">待服务</text>
					<view class="orderNum" v-if="data.to_served_num>0">{{data.to_served_num}}</view>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 3, type: 4 }))">
					<image :src="baseUrl+'img/my/6.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">服务中</text>
					<view class="orderNum" v-if="data.in_service_num>0">{{data.in_service_num}}</view>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 4, type: 5 }))">
					<image :src="baseUrl+'img/my/7.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">已完成</text>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/myorder_index/myorder_index', { current: 5, type: 6 }))">
					<image :src="baseUrl+'img/my/8.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">已取消</text>
				</view>
			</view>
		</view>
		<view class="mysubscribeBox">
			<view class="orderTopBox"
				@click="handleClick(() => $navto.navto('/pages/my_subscribe/my_subscribe', { current: 0, status: 0 }))">
				<view class="orderTypeBox">
					我的预约
				</view>
				<text class="orderArrow">></text>
			</view>
			<view class="line"></view>
			<view class="myOrderItemBox">
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/my_subscribe/my_subscribe', { current: 1, status: 1 }))">
					<image :src="baseUrl+'img/my/9.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">待核销</text>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/my_subscribe/my_subscribe', { current: 2, status: 3 }))">
					<image :src="baseUrl+'img/my/10.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">已完成</text>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/my_subscribe/my_subscribe', { current: 3, status: 4 }))">
					<image :src="baseUrl+'img/my/11.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">已取消</text>
				</view>
				<view class="myOrderItem"
					@click="handleClick(() => $navto.navto('/pages/my_subscribe/my_subscribe', { current: 4, status: 5 }))">
					<image :src="baseUrl+'img/my/12.png'" class="myOrderItemIcon"></image>
					<text class="myOrderItemLabel">已过期</text>
				</view>
			</view>
		</view>
		<view class="propertyBox">
			<view class="orderTopBox">
				<view class="orderTypeBox">
					物业服务
				</view>
			</view>
			<view class="propertyItemBox">
				<view class="propertyItem" @click="$toMini('wx78b3a0aa29ecfd38','/pages/home/index')">
					<image :src="baseUrl+'img/my/13.png'" class="propertyItemIcon"></image>
					<text class="propertyItemLabel">物业缴费</text>
					<text class="propertyItemArrow">></text>
				</view>
				<view class="propertyItem" @click="$toMini('wx78b3a0aa29ecfd38','/pages/home/index')">
					<image :src="baseUrl+'img/my/14.png'" class="propertyItemIcon"></image>
					<text class="propertyItemLabel">业主报修</text>
					<text class="propertyItemArrow">></text>
				</view>
				<view class="propertyItem" @click="$toMini('wx78b3a0aa29ecfd38','/pages/home/index')">
					<image :src="baseUrl+'img/my/15.png'" class="propertyItemIcon"></image>
					<text class="propertyItemLabel">客户投诉</text>
					<text class="propertyItemArrow">></text>
				</view>
				<view class="propertyItem" @click="qidai">
					<image :src="baseUrl+'img/my/18.png'" class="propertyItemIcon"></image>
					<text class="propertyItemLabel">优惠券</text>
					<text class="propertyItemArrow">></text>
				</view>
			</view>
		</view>
		<cc-myTabbar :tabBarShow="4"></cc-myTabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				isLogon: false,
				baseUrl: this.$baseUrl,
				avatar: this.$baseUrl + '/img/my/avatar.png',
				data: '',
				isEye:true
			};
		},
		methods: {
			qidai(){
				this.$toast('敬请期待')
			},
			eye(){
				this.isEye=!this.isEye;
			},
			// 检查登录状态
			checkLogin(callback) {
				if (!this.isLogon) {
					// 未登录，跳转到登录页面
					this.$navto.navto('/pages/login/login'); // 假设登录页面路径为 /pages/login/login
				} else {
					// 已登录，执行回调函数
					if (typeof callback === 'function') {
						callback();
					}
				}
			},
			// 处理点击事件
			handleClick(callback) {
				this.checkLogin(callback);
			},
			// 获取用户数据
			getData() {
				this.$request.get('center').then(res => {
					this.data = res.data.data;
					if (this.data.phone > 0) {
						this.avatar = this.data.head;
						this.isLogon = true;
					}
				});
			},
		},
		computed: {
			...mapState(['token']),
		},
		onShow() {
			uni.hideTabBar();
			// this.$store.dispatch('fetchUser');
			// this.fetchUserData()
			if (this.token) {
				this.getData();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getData();
						}
					}
				);
			}
		},
		onLoad() {
			uni.hideHomeButton();
			uni.hideTabBar();
		},
	}
</script>

<style lang="scss">
	.propertyBox {
		width: 670rpx;
		height: 560rpx;
		background: #ffffff;
		padding: 30rpx 40rpx 0rpx 40rpx;
		margin-top: 33rpx;

		.propertyItemBox {
			margin-top: 35rpx;

			.propertyItem {
				position: relative;
				width: 670rpx;
				height: 85rpx;
				border-bottom: 1rpx solid #cccccc;
				display: flex;
				align-items: center;
				margin-top: 33rpx;

				.propertyItemIcon {
					width: 50rpx;
					height: 50rpx;
				}

				.propertyItemLabel {
					font-weight: 500;
					font-size: 26rpx;
					color: #121212;
					margin-left: 30rpx;
					letter-spacing: 2rpx;
				}

				.propertyItemArrow {
					font-size: 22rpx;
					color: #000000;
					margin-left: auto;
				}
			}

			.propertyItem:last-child {
				border: none;
			}
		}
	}

	.mysubscribeBox {
		margin-top: 33rpx;
	}

	.myOrderBox,
	.mysubscribeBox {
		width: 670rpx;
		height: 270rpx;
		background: #ffffff;
		padding: 30rpx 40rpx 0rpx 40rpx;

		.myOrderItemBox {
			display: flex;
			margin-top: 45rpx;
			justify-content: space-between;

			.myOrderItem {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 80rpx;

				.orderNum {
					position: absolute;
					top: -10rpx;
					right: 5rpx;
					display: flex;
					/* 使用 flex 布局 */
					justify-content: center;
					/* 水平居中 */
					align-items: center;
					/* 垂直居中 */
					width: 35rpx;
					/* 固定宽度 */
					line-height: 35rpx;
					/* 固定高度，与宽度相同 */
					background-color: #FF7B6C;
					border-radius: 50%;
					/* 设置为圆形 */
					font-size: 16rpx;
					color: #fff;
					box-sizing: border-box;
					/* 确保 padding 不会影响宽高 */
				}

				.myOrderItemIcon {
					width: 50rpx;
					height: 50rpx;
				}

				.myOrderItemLabel {
					font-weight: 500;
					font-size: 24rpx;
					text-align: center;
					color: #121212;
					margin-top: 20rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}

	.line {
		width: 670rpx;
		height: 1rpx;
		background-color: #cccccc;
		margin-top: 25rpx;
	}

	.orderTopBox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.orderTypeBox {
			width: 160rpx;
			height: 52rpx;
			line-height: 52rpx;
			font-weight: 700;
			font-size: 24rpx;
			text-align: center;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			background: url('https://qn-h5-video.guguan.net/juanjiahui/img/my/3.png');
			background-size: 100% 100%;
		}

		.orderArrow {
			font-size: 22rpx;
			color: #000000;
		}
	}

	.userInfoBox {
		width: 100%;
		height: 471rpx;
		background: url('https://qn-h5-video.guguan.net/juanjiahui/img/my/bg.png');
		background-size: 100% 100%;
		position: relative;

		.memberBox {
			position: absolute;
			bottom: 0;
			left: 40rpx;
			width: 670rpx;
			height: 80rpx;
			background: url('https://qn-h5-video.guguan.net/juanjiahui/img/my/2.png');
			background-size: 100% auto;
			display: flex;
			align-items: center;

			.upgrade {
				position: absolute;
				right: 40rpx;
				top: 17rpx;
				width: 120rpx;
				height: 46rpx;
				border-radius: 22rpx;
				background: #ff6e5d;
				line-height: 46rpx;
				font-size: 22rpx;
				text-align: center;
				color: #ffffff;
				letter-spacing: 2rpx;
			}

			.memberType {
				font-weight: 700;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 40rpx;
				letter-spacing: 5rpx;
			}

			.memberNum {
				font-size: 20rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}

		.roomNumBox {
			position: absolute;
			left: 245rpx;
			top: 290rpx;
			display: flex;
			align-items: center;

			.eye {
				width: 32rpx;
				height: 24rpx;
				margin-left: 20rpx;
			}

			.roomNum {
				font-weight: 500;
				font-size: 22rpx;
				color: #8E8E8E;
			}
		}

		.notLogon {
			position: absolute;
			left: 245rpx;
			top: 260rpx;
			font-weight: 700;
			width: 420rpx;
			font-size: 34rpx;
			color: #121212;
		}

		.authBox {
			position: absolute;
			left: 245rpx;
			top: 290rpx;
			width: 130rpx;
			height: 32rpx;
			border-radius: 16rpx;
			border: 1rpx solid #ff6e5d;
			line-height: 32rpx;
			font-weight: 500;
			font-size: 20rpx;
			text-align: center;
			color: #FF6E5D;

		}
		.manage{
			position: absolute;
			right: 40rpx;
			top: 232rpx;
			width: 38rpx;
			height: 38rpx;
		}
		.selleft{
			right: 40rpx;
		}
		.set {
			position: absolute;
			right: 110rpx;
			top: 232rpx;
			width: 38rpx;
			height: 38rpx;
		}

		.name {
			position: absolute;
			left: 245rpx;
			top: 225rpx;
			font-weight: 700;
			width: 420rpx;
			font-size: 34rpx;
			color: #121212;
		}

		.avatar {
			position: absolute;
			left: 40rpx;
			top: 210rpx;
			border: 1rpx solid #FF6E5D;
			width: 135rpx;
			height: 135rpx;
			border-radius: 50%;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #f0f0f0;
		padding-bottom: 200rpx;
	}
</style>